<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>小米网后台主页-会员信息页面</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
	<!--导入js组件vue的类库-->
<script type="application/javascript" src="../js/vue.min.js"></script>

	<script type="text/javascript">
//	$(document).ready(function(){
////		loadUser();
//	})
	//连接servlet 获取 数据
//	function loadUser(){
//		$.ajax({
//			url:"getUserList",
//			method:"get",
//			success:function(data){
//				showMsg(data);
//			},
//			error:function(XMLHttpRequest,textStatus,errorThrown){
//				alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
//			}
//		});
//	}
	//显示用户信息

	//删除用户

	//条件查询

</script>
</head>
<body>
	
	<div class="row" style="width: 100%;">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">会员列表</div>
					<div class="panel-body">
					<!-- 条件查询 -->
						<div class="row">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<div class="form-group form-inline">
									<span>用户电话</span>
									<input type="text" name="username" class="form-control">
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<div class="form-group form-inline">
									<span>EMAIL</span>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<label class="radio-inline">
									  <input type="radio" name="gender" value="男"> 男&nbsp;&nbsp;&nbsp;&nbsp;
									</label>
									<label class="radio-inline">
									  <input type="radio"name="gender" value="女"> 女
									</label>
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<button type="button" class="btn btn-primary" id="search">
									<span class="glyphicon glyphicon-search"></span></button>
							</div>
						</div>
				<!-- 列表显示 -->
						<table id="tb_list" class="table table-striped table-hover table-bordered">
							<tr><td>id</td><td>电话</td><td>Email</td><td>操作</td></tr>
							<!--数据遍历-->
							<!--<tr><td>1</td><td>admin</td><td>123@126.com</td><td>禁言| 密码找回</td></tr>-->
							<!--使用vue双向绑定机制遍历集合-->
							<tr v-for="us in users">
								<td class="userid">{{us.id}}</td>
								<td class="userTel">{{us.tel}}</td>
								<td class="userEmail">{{us.email}}</td>
								<td>
									<a id="edit" @click="edit(us.id)">修改</a>
									<a id="disable" @click="disable(us.id)">禁用</a>
								</td>
							</tr>

						</table>

						<!--修改模态窗体-->
						<div class="modal fade" id="modalModify">
							<div class="modal-dialog" >
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">X</button>
										<h4 class="modal-title">用户信息修改：</h4>
									</div>
									<div class ="modal-body" >
										<div class="input-group">
											<span class="input-group-addon">ID:</span>
											<label for="id"></label><input class="input-sm" type="text" id="id" readonly unselectable="on" v-model="userInfo.id"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">账号:</span>
											<input class="input-sm" type="text" id="tel" placeholder="" v-model="userInfo.tel"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">密码:</span>
											<input class="input-sm" type="password" id="password" placeholder="" v-model="userInfo.password"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">邮箱:</span>
											<input class="input-sm" type="text" id="email" placeholder="" v-model="userInfo.email"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">邀请码:</span>
											<input class="input-sm" type="text" id="invitation" placeholder="无" v-model="userInfo.invitation"/>
										</div>


									</div>
									<div class = "modal-footer">
										<button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
										<button type="button" class="btn btn-primary" id="edit-modify">修改</button>
									</div>
								</div>
							</div>
						</div>

						
					</div>
				</div>
			</div>
		</div>
 <script>

	 var info = new Vue({
		 el:"#modalModify",
		 data:{
			 userInfo:{'id':2,'tel':'12345678901','email':'123@126.com','invitation':'xx'}
		 }
	 });


    var userInfos = new Vue({
		el:'#tb_list',  //将id为tb_list的html标签与vue对象绑定
		data:{
		    users:[{'id':2,'tel':'12345678901','email':'123@126.com'},
                {'id':3,'tel':'12345678901','email':'456@126.com'},
				{'id':2,'tel':'12345678901','email':'123@126.com'}
                ]
		},
		methods:{
			edit:function (id) {

				$.ajax({
					url:"/carsys/user/getUser",
					type:"get",
					data:{"id":id},
					dataType:"json",
					success:function(res){
						info.userInfo = res.data;
						$("#modalModify").modal("show");  //显示模态框

					},
					error:function () {
						alert("ajax错误");
					}
				});
			},
			disable:function (id){

				$.ajax({
					url:"/carsys/user/disable",
					type:'get',
					data:{"id":id},
					dataType:"json",
					success:function (ref){
						alert(ref.msg);
						loadUsers();//重新加载数据
					},
					error:function () {
						alert("ajax错误");
					}
				})
			}
		}
	});

	 //    修改关闭模态窗体
	 $("#edit-modify").click(function(){
		 alert("close");
		 $.ajax({
			 url:'/carsys/user/updateUser',
			 type:'PUT',
			 data: JSON.stringify(info.userInfo),  //将json对象转为json字符串
			 contentType:'application/json',
			 dataType:'json',
			 success:function(res){
				 if(res.statusCode==200){
					 alert(res.msg);
					 $("#modalModify").modal("hide");//关闭模态框
					 loadUsers();//重新加载数据
				 }
			 },
			 error:function () {
				 alert("修改失败");
			 }
		 });

	 })
//    jquery工厂函数
    $(function(){
        loadUsers();

	});
//    加载数据
    function loadUsers(){
//        在页面加载完成时，向后端发出ajax请求
        $.ajax({
            url:'/carsys/user/findAllUser',   //请求路径
            type:'GET',  //请求方式
//			data:'',  //请求的数据
            dataType:'json',  //响应的数据类型
            success:function (res) {
                console.log(res);
                userInfos.users = res.data;
            }
        });
    }


	 // $(".findPassword").click(function () {
		//  var tel = $(this).parents("td").parents("tr").find(".userTel").text();
		//  var email = $(this).parents("td").parents("tr").find(".userEmail").text();
		//  // alert("该用户的电话为为:"+tel);
		//  // alert("该用户的邮箱为为:"+email);
	 //
		//  $.ajax({
		// 	 url:"/carsys/user/getPassword",
		// 	 method:"post",
		// 	 data:{
		// 		 tel:tel,
		// 		 email:email
		// 	 },
		// 	 dataType:"JSON",
		// 	 success:function (data){
	 //
		// 		 alert("该用户的密码为:"+data.data);
		// 	 },
		// 	 err: function (){
		// 		 alert("ajax错误");
		// 	 }
		//  })
	 //
	 // });

 </script>
</body>
</html>